<template>
  <div>
    <div class="full-width full-height flex justify-center items-center">
      <q-inner-loading :showing="loading" style="z-index: 999">
        <q-spinner-ball size="15rem" color="primary" />
        <div class="text-h4 text-primary q-mt-lg text-bold">
          {{ $t("selfInspection.机器人自检中") }}
        </div>
      </q-inner-loading>
      <q-table
        v-if="checkList.length !== 0"
        class="no-border-radius sticky-header-table"
        :rows="checkList"
        :columns="columns"
        row-key="name"
        hide-bottom
        :pagination="{ rowsPerPage: 0 }"
        :title="$t('selfInspection.自检列表')"
        :dark="ui.isDark"
      >
        <template v-slot:top-right>
          <q-btn
            no-caps
            :label="$t('selfInspection.重检')"
            icon="cached"
            outline
            color="primary"
            @click="load"
          />
        </template>
        <template v-slot:body-cell-code="props">
          <td class="text-center">
            <span :class="props.row.code === 0 ? 'text-green' : 'text-red'">
              {{
                props.row.code === 0
                  ? $t("selfInspection.正常")
                  : $t("selfInspection.异常")
              }}
            </span>
          </td>
        </template>
      </q-table>
      <div v-else-if="!loading" class="text-center" style="max-width: 15rem">
        <q-icon
          name="sentiment_very_dissatisfied"
          color="negative"
          size="10rem"
        />
        <div class="text-h5 text-bold text-negative">
          {{
            $t("selfInspection.没有有效的设备自检信息请检查ROS程序是否正常运行")
          }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { api } from "boot/axios.js";
import { useAPIStore } from "stores/api/index.js";
import { useQuasar } from "quasar";
import { useUiStore } from "stores/ui";
import { isConnected } from "src/utils/deviceWs";
import { useI18n } from "vue-i18n";

const t = useI18n().t; // 语言包
const columns = [
  {
    label: t("selfInspection.设备模块"),
    name: "name",
    field: "name",
    align: "center",
  },
  {
    label: t("selfInspection.状态"),
    name: "code",
    field: "code",
    align: "center",
  },
  {
    label: t("selfInspection.检查日期"),
    name: "date",
    field: "date",
    align: "center",
  },
];
const $q = useQuasar();
const ui = useUiStore();
const loading = ref(true);
const checkList = ref([]);

onMounted(load);

function load() {
  if (!isConnected) {
    loading.value = false;
    return;
  }
  loading.value = true;
  api
    .post(useAPIStore().amrUrl + "ros/call", [], {
      params: { service: "/function_status" },
    })
    .then((rs) => {
      if (!rs.data.values.data) {
        $q.notify({ type: "negative", message: rs.data.values });
      } else checkList.value = rs.data.values.data;
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false;
      }, 1000);
    });
}
</script>
